<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src ="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <style>
    .del {
      text-decoration: line-through;
    }
  </style>
  <body>
    <div id="app">
      <input type="text" v-model="content" @keyup.enter="send()" />
      <button @click="send()">发布</button>
      <input type="text" v-model="searchContent" />搜索
      <hr>
      已完成任务数量：{{countDomNumber}}
      <hr>
      <div v-show="isEdit">
        编辑
        <input type="text" name="" id="" v-model="editObj.content" />
        <button @click="saveHandle()">保存</button>
      </div>

      <ul>
        <li v-for="item in filArr" :key="item.id">
          <p :class="{del:item.isDone}">{{item.content}}</p>
          <button @click="del(item.id)">删除</button>
          <button @click="change(item)">
            {{item.isDone?'已经完成-点击取消完成':'没有完成，点击完成 '}}
          </button>
          <button @click="editHandle(item)">编辑</button>
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            content: "",
            searchContent: "",
            arr: [
              { id: 1, content: "今天作业没做完", isDone: false },
              { id: 2, content: "不上夜自习", isDone: true },
              { id: 3, content: "不学习", isDone: true },
              { id: 4, content: "不上夜自习", isDone: true },
            ],
            filArr: [],
            editObj: {},
            isEdit: false,
          };
        },
        methods: {
          send() {
            console.log("发布");
            var obj = {
              id: Date.now(),
              content: this.content,
              isDone: false,
            };
            console.log(this.filArr);
            this.filArr.push(obj);
            this.content = "";
          },
          del(id) {
            this.filArr = this.filArr.filter((v) => v.id != id);
          },
          change(item) {
            //修改数组对象 的状态
            item.isDone = !item.isDone;
          },
          // search(){
          //   // console.log("2");
          //   console.log(this.searchContent);
          //   this.arr = this.arr.filter((v)=>v.content.includes(this.searchContent) )
          //   console.log(this.arr);

          // },
          editHandle(item) {
            // console.log(item);
            this.isEdit = !this.isEdit;
            //保存要编辑的对象 -- 传递的地址 -- 编辑的对象修改--影响列表对象的内容
            //  克隆一个 新的item对象 出来
            // this.editObj =item

            // 深拷贝  {id:1,child{001}} {id:1,child{002}} 会改变地址
            // 浅拷贝 {id:1,child{001}} {id:1,child{001}}

            //此为浅拷贝 item原样为 {id:1,child{001}}
            // 拷贝后 去除大括号 变为 id:1,child{001}
            // 展开 item 放入一个 新对象中  浅拷贝不会在更改input框中的值时 原数据 跟着一起变
            //切断展示内容和修改内容的联系
            // this.editObj ={...item}

            //深拷贝 需要json转为字符串 再转为对象
            this.editObj = JSON.parse(JSON.stringify(item));
            //这里就是深拷贝问题 如果直接赋值 就会造成原数据的改变
            // 如果拷贝的数据是数组可以用map转化
            // 如果item是对象可以用JSON.parse（JSON.stringify（item））这种方式转化
            // 方法用于将 JavaScript 值转换为 JSON 字符串。JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
          },
          saveHandle() {
            //修改 数组中 id一样的对象的值
            let index = this.filArr.findIndex((v) => v.id == this.editObj.id)
            console.log(this.editObj);
            console.log(index);
            
            this.$set(this.filArr,index,this.editObj)
          },
        },
        watch: {
          searchContent: {
            immediate: true,
            handler(val) {
              //indexOf 包含返回 0
              this.filArr = this.arr.filter((v) => {
                return v.content.indexOf(val) !== -1;
              });
            },
          },
        },
        computed:{
          countDomNumber:function(){
            let num = 0;
            this.filArr.forEach( (e) => {
              if(e.isDone){
                return num++
              }
            });
            return num
          }
        }
      });
    </script>
  </body>
</html>
